<template>
  <view class="container screen-width">
    <view class="content-info">
      <view class="item no">
        <view class="flex items-middle">
          <view class="must">*</view>
          <view class="lable">联系人</view>
        </view>
        <input v-model="resultFrom.achievementsContacts" placeholder="请输入" />
      </view>
      <view class="item no">
        <view class="flex items-middle">
          <view class="must">*</view>
          <view class="lable">联系电话</view>
        </view>
        <input type="number" v-model="resultFrom.achievementsPhoneNumber" placeholder="请输入" />
      </view>
      <view class="item no">
        <view class="flex items-middle">
          <view class="must">*</view>
          <view class="lable">成果来源</view>
        </view>
        <input v-model="resultFrom.achievementsSource" placeholder="请输入" />
      </view>
      <view class="item no">
        <view class="flex items-middle">
          <view class="must">*</view>
          <view class="lable">成果名称</view>
        </view>
        <input v-model="resultFrom.achievementsName" placeholder="请输入" />
      </view>
      <view class="item no">
        <view class="flex items-middle">
          <view class="must">*</view>
          <view class="lable">成果介绍</view>
        </view>
        <cover-view class="pro-info">
          <textarea v-model="resultFrom.achievementsContent" placeholder="请输入成果介绍"></textarea>
          <!-- maxlength="500" -->
        </cover-view>
      </view>
      <view class="item no">
        <view class="flex items-middle">
          <view class="must">*</view>
          <view class="lable">地区</view>
        </view>
        <input
          v-if="!resultFrom.region.length"
          placeholder="请选择"
          @click="showArea"
          :disabled="true"
        />
        <view v-else class="text-input" @click="showArea">{{address}}</view>
        <!-- <view @click="showArea">{{resultFrom.region?`${resultFrom.region}`:'请选择'}}</view> -->
      </view>
      <view class="item no">
        <view class="flex items-middle">
          <view class="must">*</view>
          <view class="lable">成果图片</view>
        </view>
        <view class="banner-content flex flex-wrap space-between">
          <view
            class="banner-photo"
            v-for="(item,index) in resultFrom.achievementsImages"
            :key="index"
          >
            <img :src="$imgUrl + item" />
            <view class="del">
              <icon type="clear" size="16" @tap="delBannerImage(index)" />
            </view>
          </view>
          <view class="banner-photo" style="line-height: 100px" @tap="uploadFile1">+</view>
        </view>
      </view>
      <view class="main_btn" @tap="submitForm">提交</view>
    </view>
    <!-- 地区 -->
    <resultArea
      ref="picker"
      :isshowArea="isshowArea"
      :parent="parent"
      :children="children"
      @affirm="affirm"
      @cancel="cancel"
    ></resultArea>
    <Festival></Festival>
  </view>
</template>
<script>
import { isWeixin, wxShareConfig } from "../../util/wx.js";
import { achievementsAdd, resultAreaInfo } from "../../util/api/result.js";
import resultArea from "../../components/ResultArea.vue";
import { isMobile } from "../../util/validator.js";
export default {
  components: { resultArea },
  data() {
    return {
      isshowArea: false,
      areaArr: [],
      parent: [],
      children: [],
      province: "",
      city: "",
      address: "",
      resultFrom: {
        achievementsContacts: "",
        achievementsPhoneNumber: "",
        achievementsSource: "",
        achievementsName: "",
        achievementsContent: "",
        region: [],
        achievementsImages: []
      }
    };
  },
  onLoad() {
    this.getArea();
  },
  methods: {
    getArea() {
      resultAreaInfo().then(res => {
        this.areaArr = res.result;
        this.areaArr.map(item => {
          this.parent.push(item.value);
        });
        this.areaArr.map(item => {
          this.children.push(item.children);
        });
        this.parent.unshift("请选择");
        for (let i = 0; i < this.children.length; i++) {
          this.children[i].unshift({ value: "请选择" });
        }
      });
    },
    showArea() {
      this.isshowArea = true;
    },
    affirm(parentArrIndex, childrenArrIndex) {
      if (parentArrIndex === 0) {
        this.province = "";
        this.city = "";
      } else if (
        parentArrIndex !== 0 &&
        childrenArrIndex !== undefined &&
        childrenArrIndex !== "" &&
        childrenArrIndex !== 0
      ) {
        this.province = this.parent[parentArrIndex];
        let arr = this.children[parentArrIndex - 1];
        this.city = arr[childrenArrIndex].value;
      } else {
        this.province = this.parent[parentArrIndex];
        this.city = "";
      }
      if (this.province && this.city) {
        this.resultFrom.region = [];
        // this.address = this.city;
        this.resultFrom.region.push(this.province);
        this.resultFrom.region.push(this.city);
        this.address = this.resultFrom.region.join("/");
      } else {
        this.resultFrom.region = [];
        this.resultFrom.region.push(this.province);
        this.address = this.resultFrom.region.join("/");
      }
      this.cancel();
    },
    cancel() {
      this.isshowArea = false;
    },
    submitForm() {
      let arr = [
        {
          text: "联系人",
          value: this.resultFrom.achievementsContacts,
          type: 1
        },
        {
          text: "联系电话",
          value: this.resultFrom.achievementsPhoneNumber,
          type: 1
        },
        {
          text: "成果来源",
          value: this.resultFrom.achievementsSource,
          type: 1
        },
        { text: "成果名称", value: this.resultFrom.achievementsName, type: 1 },
        {
          text: "成果介绍",
          value: this.resultFrom.achievementsContent,
          type: 1
        },
        { text: "地区", value: this.resultFrom.region, type: 2 },
        { text: "成果图片", value: this.resultFrom.achievementsImages, type: 3 }
      ];
      for (let i = 0; i < arr.length; i++) {
        let obj = arr[i];
        if (obj.type === 1 && obj.value === "") {
          uni.showToast({
            title: `${obj.text}未填写`,
            duration: 2000,
            icon: "none"
          });
          return;
        } else if (obj.type === 2 && obj.value.length === 0) {
          uni.showToast({
            title: "您还未选择地区",
            duration: 2000,
            icon: "none"
          });
          return;
        } else if (obj.type === 3 && obj.value.length === 0) {
          uni.showToast({
            title: "您还没上传成果图片",
            duration: 2000,
            icon: "none"
          });
          return;
        }
      }
      if (!isMobile(this.resultFrom.achievementsPhoneNumber)) {
        uni.showToast({
          title: "请输入11位的联系电话",
          duration: 2000,
          icon: "none"
        });
        return;
      }
      achievementsAdd(this.resultFrom).then(res => {
        if (res.code === 200) {
          uni.showToast({
            title: "提交成功,等待后台审核",
            duration: 2000,
            icon: "none"
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        } else {
          uni.showToast({
            title: res.message,
            duration: 2000,
            icon: "none"
          });
        }
      });
    },
    uploadFile1() {
      let _this = this;
      uni.chooseImage({
        count: 9,
        success: chooseImageRes => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          this.fileList = tempFilePaths;
          tempFilePaths.forEach(element => {
            uni.uploadFile({
              url: "https://bootapi.51bmj.cn/bmj-api/api/home/upload", //仅为示例，非真实的接口地址
              filePath: tempFilePaths[0],
              name: "file",
              success: res => {
                let { data } = res;
                try {
                  data = JSON.parse(data);
                  _this.resultFrom.achievementsImages.push(data.result);
                  if (_this.resultFrom.achievementsImages.length >= 10) {
                    uni.showToast({
                      title: "成果展示图最多存放9张或以下",
                      duration: 2000,
                      icon: "none"
                    });
                    _this.resultFrom.achievementsImages = _this.resultFrom.achievementsImages.slice(
                      0,
                      9
                    );
                  }
                } catch (error) {
                  console.log(error);
                }
              }
            });
          });
        }
      });
    },
    // 删除Banner图片
    delBannerImage(index) {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确认删除此图片",
        cancelText: "考虑一下",
        success(res) {
          if (res.confirm) {
            _this.resultFrom.achievementsImages.splice(index, 1);
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  background: #fcfcfc;
  .content-info {
    padding: 30upx;
    box-sizing: border-box;
    .synopsis {
      font-size: 24upx;
      color: #bbb;
      margin-bottom: 20upx;
    }
    .item {
      margin-bottom: 20upx;
      .must {
        color: red;
      }
      input {
        border: 1px solid #ccc;
        border-radius: 10upx;
        width: 80%;
        min-height: 60upx;
        padding: 10upx;
        box-sizing: border-box;
      }
      textarea {
        border: 1px solid #ccc;
        border-radius: 10upx;
        width: 100%;
        padding: 10upx;
        box-sizing: border-box;
        margin-top: 15upx;
      }
      .banner-content {
        margin-top: 20rpx;
        width: 100%;
        .banner-photo {
          width: 48%;
          height: 100px;
          background: #ffffff;
          font-size: 24px;
          color: #1678ff;
          font-weight: 500;
          // line-height: 100px;
          text-align: center;
          margin-bottom: 10px;
          position: relative;
          img {
            width: 100%;
            height: 100px;
          }
          .del {
            color: #fff;
            width: 16px;
            height: 16px;
            position: absolute;
            right: 0;
            top: -5px;
            border-radius: 50%;
            font-size: 16px;
          }
        }
      }
      .text-input {
        border: 1px solid #ccc;
        border-radius: 10upx;
        min-height: 60upx;
        padding: 10upx;
        box-sizing: border-box;
        margin-top: 14rpx;
      }
    }
    .no {
      input {
        width: 100%;
        margin-top: 15upx;
      }
    }
    .main_btn {
      margin-top: 80rpx;
      background-color: #1678ff;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }
}
</style>